<script setup>
import orderService from '@/api/modules/order/order'
import SafeTopContainer from '@/components/SafeTopContainer/SafeTopContainer.vue'
import { formatTime } from '@/utils/day'
import { useToast } from 'wot-design-uni'

const pagingRef = ref(null)
const orderList = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const isLoading = ref(false)
const searchVal = ref('')
const orderStatus = ref('none')
const orderTypeList = ref([
  {
    label: '全部',
    value: 'none',
  },
  {
    label: '有效',
    value: 'valid',
  },
  {
    label: '无效',
    value: 'invalid',
  },
])

onShow(() => {
  onQuery(1, pageSize.value)
})

async function onQuery(pageNo, pageSize) {
  try {
    isLoading.value = true
    currentPage.value = pageNo
    const params = {
      orderStatus: orderStatus.value === 'none' ? null : orderStatus.value,
      vin: searchVal.value,
    }
    const result = await orderService.mobileList(params)
    console.log('数据加载成功:', result)
    const data = result.data
    const list = data.orderMobileQueryListVos
    if (result.code === 200) {
      total.value = 50

      if (pageNo === 1) {
        orderList.value = list
      }
      else {
        orderList.value.push(...list)
      }
      pagingRef.value.complete(list)

      // if (list.length < pageSize) {
      //   pagingRef.value.completeByNoMore(list)
      // }
    }
    else {
      throw new Error(result.message || '数据加载失败')
    }
  }
  catch (error) {
    console.error('数据加载失败:', error)
    // toast.error(error.message || '加载失败')
    pagingRef.value.complete(false)
  }
  finally {
    isLoading.value = false
  }
}

function onRefresh() {
  onQuery(1, pageSize.value)
}

function payTagClass(order) {
  switch (order.orderStatus) {
    case 'waitVaild':
      return 'bg-orange-100 text-orange-600'
    case 'vaild':
      return 'bg-green-100 text-green-600'
    case 'invalid':
      return 'bg-red-100 text-red-600'
    default:
      return 'bg-gray-100 text-gray-600'
  }
}

function tabChange(value) {
  orderStatus.value = value.name
  orderList.value = []
  searchVal.value = ''
  onQuery(1, pageSize.value)
}

function onOrderDetail(orderUuid) {
  uni.navigateTo({
    url: `/pages/order/detail?orderUuid=${orderUuid}`,
  })
}
</script>

<template>
  <div class="order-container h-full">
    <z-paging
      ref="pagingRef"
      v-model="orderList"
      class="flex-1"
      :refresher-enabled="true"
      :refresher-threshold="80"
      refresher-default-text="下拉刷新数据"
      refresher-pulling-text="释放立即刷新"
      refresher-refreshing-text="正在刷新..."
      refresher-complete-text="刷新完成"
      :loading-more-enabled="true"
      :loading-more-text="['点击加载更多', '正在加载...', '已全部加载']"
      empty-view-text="暂无内容数据"
      :auto-show-back-to-top="true"
      :back-to-top-threshold="300"
      :auto="false"
      use-virtual-list
      @query="onQuery"
      @on-refresh="onRefresh"
    >
      <template #top>
        <div class="bg-white text-center">
          <safe-top-container bg-color="#fff" :padding-bottom="20" :show-bg-color="true">
            <div class="text-center text-lg font-bold">
              我的订单
            </div>
          </safe-top-container>
        </div>
        <div class="text-center">
          <wd-search v-model="searchVal" placeholder="请输入车架号" cancel-txt="搜索" @search="onQuery(1, pageSize)" @cancel="onQuery(1, pageSize)" />
        </div>
        <wd-tabs v-model="orderStatus" :animated="true" @change="tabChange">
          <wd-tab v-for="item in orderTypeList" :key="item.id" :title="item.label" :name="item.value" />
        </wd-tabs>
      </template>
      <div class="mb-6 px-4 pb-6 pt-2">
        <div
          v-for="order in orderList"
          :key="order.orderUuid"
          class=""
          @click="onOrderDetail(order.orderUuid)"
        >
          <div class="shadow-xs mb-4 flex flex-col gap-2 rounded-lg bg-white p-4">
            <div class="flex items-center justify-between text-sm text-gray-500">
              <span>{{ order.orderCode }}</span>
              <span :class="payTagClass(order)" class="rounded-full px-2 py-0.5 text-xs font-semibold">
                {{ order.orderStatusDict }}
              </span>
            </div>

            <div class="text-base text-gray-800 font-semibold">
              {{ order.productName }}
            </div>
<!--            <div class="text-sm text-gray-500">-->
<!--              {{ order.productTypeDict }}-->
<!--            </div>-->
            <div class="flex items-center justify-between text-sm text-gray-600">
              <span>下单时间：{{ formatTime(order.orderTime, 'YYYY-MM-DD') }}</span>
              <span class="text-xl text-red-500 font-semibold">￥{{ order.totalPrice }}</span>
            </div>
            <div class="flex items-center justify-between">
              <div class="truncate text-xs text-gray-400">
                车架号：{{ order.vin }}
              </div>
              <div v-if="order.orderStatus === 'vaild'" class="text-xs text-gray-400">
                报告{{order.unreadFlag === 1 ? '未读' : '已读'}}
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #refresher>
        <view class="flex flex-col items-center justify-center bg-transparent py-6 backdrop-blur-sm">
          <view class="mb-2 h-8 w-8 animate-spin border-3 border-blue-500 border-t-transparent rounded-full" />
          <text class="text-sm text-black font-medium">
            正在刷新内容...
          </text>
        </view>
      </template>
      <template #loadingMore>
        <view class="flex flex-col items-center justify-center py-8">
          <view class="mb-2 h-6 w-6 animate-spin border-2 border-gray-300 border-t-blue-500 rounded-full" />
          <text class="text-sm text-gray-500">
            正在加载更多内容...
          </text>
        </view>
      </template>
      <template #noMore>
        <view class="flex flex-col items-center justify-center py-8">
          <view class="i-carbon-checkmark-filled mb-2 h-8 w-8 text-green-500" />
          <text class="text-sm text-gray-500">
            已加载全部内容
          </text>
          <text class="mt-1 text-xs text-gray-400">
            共 {{ total }} 条数据
          </text>
        </view>
      </template>

      <template #empty>
        <wd-status-tip image="content" tip="暂无订单">
          <template #image>
            <img src="@/static/svg/empty.svg" class="w-20 h-20">
          </template>
        </wd-status-tip>
      </template>
    </z-paging>
  </div>
</template>

<style lang="scss" scoped>
.order-container {
  height: calc(100vh - 85px - 85px);
}
</style>

<route lang="json5">
{
layout: 'tabbar',
}
</route>
